import { useState } from 'react'
import { Form, Input, Select, Col } from 'antd'
import {
    PageContainer,
    SearchForm,
    ProTable,
    showDelete
} from '@/components'
import { userApi } from '@/services/api'

export default function UserList() {
    const [searchParams, setSearchParams] = useState({})

    const columns = [
        {
            title: '用户名',
            dataIndex: 'username',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: status => (
                <Select value={status} disabled>
                    <Select.Option value={1}>正常</Select.Option>
                    <Select.Option value={0}>禁用</Select.Option>
                </Select>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <a onClick={() => handleDelete(record.id)}>删除</a>
            ),
        },
    ]

    const handleSearch = (values) => {
        setSearchParams(values)
    }

    const handleDelete = (id) => {
        showDelete({
            onOk: async () => {
                await userApi.deleteUser(id)
                // 刷新表格
            }
        })
    }

    return (
        <PageContainer title="用户列表">
            <ProTable
                columns={columns}
                request={userApi.getUserList}
                searchForm={
                    <SearchForm onSearch={handleSearch}>
                        <Col span={6}>
                            <Form.Item label="用户名" name="username">
                                <Input placeholder="请输入用户名" />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="状态" name="status">
                                <Select placeholder="请选择状态">
                                    <Select.Option value={1}>正常</Select.Option>
                                    <Select.Option value={0}>禁用</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </SearchForm>
                }
            />
        </PageContainer>
    )
} 